<template>
  <div class="PageBox">
    <div class="ScrollBox">
      <van-tabs :border="false" color="#4087f1" title-active-color="#4087f1" background="#151d31" title-inactive-color="#bbb" line-width="60" v-model="tabsIndex" @change="changeTabs">
        <van-tab v-for="(item,index) in $t('teamReport.tabs')" :title="item" :key="index">
          <div class="search">
            <div>
              <input type="text" readonly v-model="startDate" @click="showDate=true,currentDate=new Date(startDate),pickType=1">
              -
              <input type="text" readonly v-model="endDate" @click="showDate=true,currentDate=new Date(endDate),pickType=2">
            </div>
            <van-button type="info" size="mini" @click="getTeamReport">{{$t('teamReport.default[0]')}}</van-button>
          </div>
          <div class="Report" v-show="tabsIndex==0">
            <van-grid class="MyEarnings" :column-num="2" :border="false" gutter="1">
              <!-- <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[1]')}}({{InitData.currency}})
                </template>
                <template #text>
                  {{reportData.teamBalance||'0.00'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[2]')}}({{InitData.currency}})
                </template>
                <template #text>
                  {{reportData.teamProfit||'0.00'}}
                </template>
              </van-grid-item> -->
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[3]')}}({{InitData.currency}})
                </template>
                <template #text>
                  {{reportData.teamRecharge||'0.00'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[4]')}}({{InitData.currency}})
                </template>
                <template #text>
                  {{reportData.teamWithdrawal||'0.00'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[5]')}}({{$t('teamReport.default[9]')}})
                </template>
                <template #text>
                  {{reportData.firstRechargeToday||'0'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[6]')}}({{$t('teamReport.default[9]')}})
                </template>
                <template #text>
                  {{reportData.directlyUnder||'0'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[7]')}}({{$t('teamReport.default[9]')}})
                </template>
                <template #text>
                  {{reportData.teamNumber||'0'}}
                </template>
              </van-grid-item>
              <van-grid-item>
                <template #icon>
                  {{$t('teamReport.default[8]')}}({{$t('teamReport.default[9]')}})
                </template>
                <template #text>
                  {{reportData.newReg||'0'}}
                </template>
              </van-grid-item>
            </van-grid>
            <van-tabs color="#4087f1" title-active-color="#4087f1" background="#151d31" title-inactive-color="#bbb" v-model="teamActive" style="margin-top: 10px;">
              <van-tab :title="$t('teamReport.team[0]')">
                <van-grid class="MyEarnings" :column-num="3" :border="false" gutter="1" v-if="!Array.isArray(reportData.team1)">
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[18]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team1.teamRechargeCount||'0.00'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[19]')}}({{$t('teamReport.default[9]')}})
                    </template>
                    <template #text>
                      {{reportData.team1.teamRechargeNumber||'0'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[20]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team1.teamSpreadSum||'0.00'}}
                    </template>
                  </van-grid-item>
                </van-grid>
                <van-empty :description="$t('teamReport.default[17]')" style="opacity: .5" v-else />
              </van-tab>
              <van-tab :title="$t('teamReport.team[1]')">
                <van-grid class="MyEarnings" :column-num="3" :border="false" gutter="1" v-if="!Array.isArray(reportData.team2)">
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[18]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team2.teamRechargeCount||'0.00'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[19]')}}({{$t('teamReport.default[9]')}})
                    </template>
                    <template #text>
                      {{reportData.team2.teamRechargeNumber||'0'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[20]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team2.teamSpreadSum||'0.00'}}
                    </template>
                  </van-grid-item>
                </van-grid>
                <van-empty :description="$t('teamReport.default[17]')" style="opacity: .5" v-else />
              </van-tab>
              <van-tab :title="$t('teamReport.team[2]')">
                <van-grid class="MyEarnings" :column-num="3" :border="false" gutter="1" v-if="!Array.isArray(reportData.team3)">
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[18]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team3.teamRechargeCount||'0.00'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[19]')}}({{$t('teamReport.default[9]')}})
                    </template>
                    <template #text>
                      {{reportData.team3.teamRechargeNumber||'0'}}
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      {{$t('teamReport.default[20]')}}({{InitData.currency}})
                    </template>
                    <template #text>
                      {{reportData.team3.teamSpreadSum||'0.00'}}
                    </template>
                  </van-grid-item>
                </van-grid>
                <van-empty :description="$t('teamReport.default[17]')" style="opacity: .5" v-else />
              </van-tab>
            </van-tabs>
          </div>
          <div class="MyTeam" v-show="tabsIndex==1">
            <div class="mt10 bar" v-if="lowerName.length">
              <a href="javascript:;" @click="lowerReport()"><i>{{$t('teamReport.default[10]')}}</i></a>
              <a href="javascript:;" v-for="(item,index) in lowerName" @click="lowerReport(item.pve_id,index)">><em v-if="index==lowerName.length-1">{{item.name}}</em><i v-else>{{item.name}}</i></a>
            </div>
            <table class="mt10" width="100%">
              <thead>
                <tr>
                  <th>{{$t('teamReport.default[11]')}}</th>
                  <th>{{$t('teamReport.default[12]')}}</th>
                  <th>{{$t('teamReport.default[13]')}}</th>
                  <th>{{$t('teamReport.default[14]')}}</th>
                  <th>{{$t('teamReport.default[15]')}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in reportData.teamData" :key="index">
                  <td><a href="javascript:;" @click="getSubUser(item.id,item.username)">{{item.username}}</a></td>
                  <td>{{item.recharge}}</td>
                  <td>{{item.withdrawal}}</td>
                  <td>{{item.rebate}}</td>
                  <td>{{item.commission}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="showDate" position="bottom" close-on-popstate>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :title="$t('teamReport.default[16]')"
        :min-date="minDate"
        @confirm="confirmDate"
        @cancel="showDate=false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'TeamReport',
  components: {
  },
  props: [],
  data() {
    return {
      tabsIndex: 0,
      currentDate: '',
      startDate: this.$Util.DateFormat('YY-MM-DD',new Date()),
      endDate: this.$Util.DateFormat('YY-MM-DD',new Date()),
      showDate: false,
      minDate: new Date(2020,0,1),
      pickType: 1,
      reportData: {
        team1: '',
        team2: '',
        team3: ''
      },
      lowerName: [],
      currPid: '',
      teamActive: 0,
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    switch(this.tabsIndex){
      case 1:
        this.$parent.navBarTitle = this.$t('teamReport.tabs[1]')
        break;
      default:
        this.$parent.navBarTitle = this.$t('teamReport.tabs[0]')
    }
    this.getTeamReport()
  },
  mounted() {

  },
  activated() {

  },
  destroyed() {
    
  },
  methods: {
    confirmDate(date) {
      if(this.pickType==1){
        this.startDate = this.$Util.DateFormat('YY-MM-DD',date)
      }
      if(this.pickType==2){
        this.endDate = this.$Util.DateFormat('YY-MM-DD',date)
      }
      this.showDate = false
    },
    changeTabs(index){
      switch(index){
        case 1:
          this.$parent.navBarTitle = this.$t('teamReport.tabs[1]')
          break;
        default:
          this.currPid = ''
          this.lowerName = []
          this.$parent.navBarTitle = this.$t('teamReport.tabs[0]')
          this.getTeamReport()
      }
    },
    getSubUser(pid,name) {
      this.lowerName.push({name: name,pve_id: pid})
      this.getMyTeam(pid)
    },
    getTeamReport() {
      let post = {startdate: this.startDate,enddate: this.endDate}
      if(this.currPid){
        post.pve_id = this.currPid
      }
      this.$Model.TeamReport(post,data=>{
        if(data.code==1){
          data.teamData = Object.values(data.teamData)
          this.reportData = data;
        }
      })
    },
    getMyTeam(pid) {
      let post = {pve_id: pid,startdate: this.startDate,enddate: this.endDate}
      this.currPid = pid
      this.$Model.TeamReport(post,data=>{
        if(data.code==1){
          this.reportData.teamData = Object.values(data.teamData)
        }else{
          this.reportData.teamData = []
        }
      })
    },
    lowerReport(pid,index){
      if(pid){
        this.currPid = pid
        if(index!=this.lowerName.length-1){
          this.getMyTeam(pid)
          this.lowerName = this.lowerName.slice(0,index+1);
        }
      }else{
        this.currPid = ''
        this.lowerName = []
        this.getTeamReport()
      }
    },
  }
}
</script>
<style scoped>
table{
  text-align: center;
  margin-bottom: 20px;
}
table tr th{
  padding: 6px 5px;
  background-color: #151d31;
  color: #bbb;
}
table tr td{
  border: 1px #151d31 solid;
  padding: 10px 5px;
  color: #fff;
}
table tr td:first-child,table tr td:last-child{
  border-left: 0;
}
table tr td em{
  color: #4087f1;
}
.search{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.search input{
  border: 1px #ddd solid;
  border-radius: 5px;
  width: 110px;
  line-height: 24px;
  text-align: center;
  font-size: 13px;
  color: #333;
}
.MyTeam .bar{
  padding: 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.MyTeam .bar a{
  color: #888;
}
.MyTeam .bar i{
  color: #1989fa;
}
</style>